<template>
  <div class="personData-profession">
    <van-nav-bar title="职业" left-arrow   @click-left="onClickLeft">
      <template #right >
        <span id="s" @click="preserve">保存</span>
      </template>
    </van-nav-bar>
    <br>
    <van-cell-group>
  <van-field v-model="professionValue" label="职业" placeholder="请输入用户名" size="large"/>
</van-cell-group>
  </div>
</template>

<script>
export default {
  data(){
    return {
      professionValue:'',
    }
  },
  created(){

  },
  methods:{
    onClickLeft(){
      this.$router.push('/privateData')
    },
    // 保存修改的职业
    preserve(){
      if(this.professionValue!=''){
        this.$toast.loading('保存中...');
        setTimeout(() => {
        this.$toast.clear();
        this.$store.dispatch('getProfession',this.professionValue);
        this.$router.push('/privateData')
      },300);
      }else {
        this.$router.push('/privateData')
      }
      
    }
  }
}
</script>

<style lang="less" scope>
#s{
  width: 60px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  // font-family: Microsoft Yahei;
}
.van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
  .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #151515;
  }
</style>